<script setup>
import {gsap} from "gsap";
import {ScrollTrigger} from "gsap/ScrollTrigger";
import {WechatOutlined,QqOutlined} from "@ant-design/icons-vue";

gsap.registerPlugin(ScrollTrigger)
//成员信息
import {onMounted} from "vue";

const team = [
  {
    name: '吴贵华',
    role: 'CCF主席 后端开发',
    imageUrl: '/avators/wgh.jpg',
    honors: [
      "洒洒水啦",
      "已婚不处",
      "实习ing"
    ]
  },
  {
    name: '陈澳',
    role: '后端开发',
    imageUrl: '/avators/ca.jpg',
    honors: [
      "单身帅比"
    ],
    contact: [
      {
        type: 'wechat',
        content: "a875627254"
      }
    ]
  },
  {
    name: '张睿桐',
    role: '保研 算法',
    imageUrl: '/avators/zrt.jpg',
    honors: [
      "区区年级第一"
    ]
  },
  {
    name: '滕森',
    role: '保研 算法',
    imageUrl: '/avators/ts.jpg',
    honors: [
      "区区年级第二"
    ]
  },
  {
    name: '李家强',
    role: '后端开发',
    imageUrl: '/avators/ljq.jpg',
    honors: [
      "实习ing"
    ]
  },
  {
    name: '潘文宝',
    role: '运维',
    imageUrl: '/avators/pwb.jpg',
    honors: [
        "单身"
    ],
    contact: [
      {
        type: 'wechat',
        content: "tec1485513203"
      },
      {
        type: 'qq',
        content: "1485513203"
      }
    ],

  },
  {
    name: '张洳维',
    role: '后端开发',
    imageUrl: '/avators/zrw.jpg',
    honors: [
      "美女"
    ]
  },
  {
    name: '罗广',
    role: '前端开发',
    imageUrl: '/avators/lg.jpg',
    honors: [
        "Apache committer"
    ]
  },
]

// gsap
// 滚动飞回
const flyToCenter = () => {
// 找到所有的li元素
  const items = document.querySelectorAll('.bg-white ul li');

  // 遍历每个li元素，创建动画
  items.forEach(item => {
    gsap.from(item, {
      duration: 1, // 动画持续时间
      opacity: 0, // 初始时透明度为0
      x: (1 - 0.5) * 200, // 初始X轴位置，随机
      y: (1 - 0.5) * 200, // 初始Y轴位置，随机
      scrollTrigger: {
        trigger: item, // 触发动画的元素
        start: "bottom bottom", // 触发动画的位置（当元素顶部到达视窗中心）
        // toggleActions: "play none none none" // 控制动画的播放行为
        scrub: true // 平滑地根据滚动位置更新动画
      }
    });
  });
}

onMounted(() => {
  flyToCenter()
})
</script>

<template>
  <div id="team" class="overflow-hidden bg-white py-24 sm:py-32">
    <div class="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
      <div class="max-w-2xl">
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">团队核心成员</h2>
        <p class="mt-6 text-lg leading-8 text-gray-600">
          我们的团队不仅是工作伙伴，更是志同道合的朋友，共同追求卓越。
        </p>
      </div>
      <ul role="list" class="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2">
        <li v-for="person in team" :key="person.name">
          <div class="flex items-center gap-x-6">
            <img class="h-16 w-16 rounded-full" :src="person.imageUrl" alt=""/>
            <div>
              <h3 class="text-base font-semibold leading-7 tracking-tight text-gray-900">
                {{ person.name }}
                <div v-if="person.honors && person.honors.length>0" style="display: flex;gap: 3px;align-items: center;">
                  <div v-for="honor in person.honors" class="badge badge-primary badge-outline">
                    {{ honor }}
                  </div>
                </div>

              </h3>
              <p class="text-sm font-semibold leading-6 text-indigo-600">{{ person.role }}</p>
            </div>

          </div>
          <!--  联系方式-->
          <template v-if="person.contact && person.contact.length>0">
            <div v-for="contact in person.contact" class="flex flex-row items-center justify-start w-full gap-2.5">
              <WechatOutlined v-if="contact.type === 'wechat'" style="color:rgb(79 70 229)"/>
              <QqOutlined  v-if="contact.type === 'qq'" style="color:rgb(79 70 229)"/>
              <a
                  v-if="contact.type === 'wechat'"
                  :href="`weixin://contacts/profile/${contact.content}`"
                  class="text-sm font-semibold leading-6 text-indigo-600"
              >
                {{ contact.content }}
              </a>

              <a
                  v-if="contact.type === 'qq'"
                  :href="`tencent://message/?v=3&uin=${contact.content}&site=qq&menu=yes`"
                  class="text-sm font-semibold leading-6 text-indigo-600"
              >
                {{ contact.content }}
              </a>
            </div>
          </template>

        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>

</style>